Linux环境前端vue项目打包失败，路径大小写敏感问题怎么解决？ |
您所在的位置：网站首页 › linux 文件名大小写 › Linux环境前端vue项目打包失败，路径大小写敏感问题怎么解决？ |
Linux环境前端vue项目打包失败，路径大小写敏感问题怎么解决？
|
文章目录
前言一、Gitlab-runner Linux环境打包报错？二、什么原因？三.怎么解决？总结
前言
公司的前端项目一直没使用自动打包部署，都是手动build发布到服务器上面，感觉很不方便。所以用了gitlab runner 自动打包发布。部署完环境之后，在Linux上面打包前端代码一直报错，找不到文件，发现是文件路径大小写问题导致。 一、Gitlab-runner Linux环境打包报错？
原因是windows下路径大小写不敏感，如/page/index.js== Page/index.js,但是在Linux环境下·/page!=/Page 它们表示两个不同的文件夹，所以在我们开发时应该遵守规范，严格按照大小写引入。还有个一原因，我在写路由的时候，会省略index.vue文件，比如/page/login/index.vue 写成page/login，打包的时候也会报错. 三.怎么解决？ 如果是路由错误文件比较少，逐个修改路径到正确即可若文件比较多怎么办？一个个修改费时费力，还容易漏掉，显然不可取，这里我写了个nodeJs脚本来解决，简单方便Tips: 脚本放在src/router/ 文件夹下面，和路由文件index.js 平级。 /* * @Author: Alan * @Date: 2021-12-29 17:05:21 * @Description: 自动校正路径大小写问题 */ let fs = require('fs'); // 引入fs模块 let path = require('path') let getPath = path.join(__dirname, 'index.js'); // 获取路由文件的路径 let fileText = fs.readFileSync(getPath, 'utf-8') // 读取路由文件 let pathReplace = {}; let regx = /(? require(['../components/xxx'] ) // 正则匹配规则可按自己的需求修改 // 匹配文件路径 let str = fileText.match(regx); str.forEach(val => { let filePath = path.join(__dirname, val); // 拼接出完整的文件路径去找文件 // 检查文件是否为目录 try { let stats = fs.statSync(filePath); if (stats.isDirectory()) { // 判断是否为文件夹 filePath = path.join(filePath, 'index.vue'); // 拼上省略的index.vue } } catch (err) { // 若读取失败，则是我们省略了.vue 后缀 导致读取不到文件，这里给拼上 let fileBaseName = path.basename(filePath); let fileBaseDir = path.dirname(filePath); filePath = path.join(fileBaseDir, fileBaseName + '.vue') } // 核心方法 可以返回文件的真实路径，区分大小写的那种 let realPath = fs.realpathSync.native(filePath, function (err, data1) { if (err) { console.log(err) } }) dir = replaceDir(realPath) // 得出正确的引入路径 if (val !== dir) { // 判断下我们的index.js 文件中路径是否正确 pathReplace[val] = dir // 错误的话，存到对象中，方便我们替换 } }) // 正则截取路由文件中需要用到的路径 function replaceDir(dir) { let regx2 = /(? { let newVal = pathReplace[val]; if (newVal) { return newVal } }) //重写文件 fs.writeFile(path.join(__dirname, 'index.js'), fileText, (err) => { console.log(err); }) 总结使用脚本解决问题刚开始可能感觉比较麻烦，但当熟练起来会感觉很方便，效率也快。当然最重要的是有一个良好的编码习惯，尤其是多人协作的时候，能避免这些让人头疼的坑。 PS ：前端菜鸟一只，有不对的地方望各位大佬多多指正~ ~ |
打包一直报错文件找不到，实际上在windows下面打包是OK的，原因是英文vue router配置里面引入组件路径大小写错误，正确路径应该是../components/Page/...【本文地址】
今日新闻 |
推荐新闻 |